<template>
	<u-loading :show="true">
		<view class="login_container">
		<!-- 登录主体 -->
		<view class="loginBox">
			<!-- PMS logo -->
			<view class="halfBox">
				<view class="pmsLogo">
					<img src="@/static/login/logo.png">
				</view>
				<view class="slogan">人工智能脊柱健康个性化参数测量分析平台</view>
			</view>
			<!-- 登录按钮以及免责声明、个人信息保护 -->
			<view class="halfBox">
				<!-- 使用手机号登录按钮 -->
				<button ref="realLogin" open-type="getPhoneNumber" @getphonenumber="login" type="primary" class="phoneLogin">使用手机号快捷登录</button>
				<!-- 假的登录按钮 -->
				<view v-if="false" @click="fakeLogin" class="fakeLogin">使用手机号快捷登录</view>
				<view v-if="false" class="agreeBox">
					<!-- 同意勾选选项 -->
					<u-checkbox-group
						v-model="checkboxValueList"
						placement="row"
						@change="agreeChange"
						style="background-color: #000;"
					>
						<u-checkbox :name="true" size="14" class="checkBox"></u-checkbox>
					</u-checkbox-group>
					<!-- 同意文字 -->
					<view class="agreeText">我已阅读并同意</view>
					<!-- 免责声明 -->
					<view @click="toPrivacyPolicyPage(1)" class="disclaimer">《同九脊柱健康测量小程序用户使用服务协议》</view>
					<view class="agreeText">和</view>
					<!-- 个人信息保护 -->
					<view @click="toPrivacyPolicyPage(2)" class="personalInfo">《个人信息保护》</view>
				</view>
				<view class="freeUse">
					<text class="open">公益开放</text>
					<text class="use">免费使用</text>
				</view>
			</view>
		</view>

		<!-- copyRight -->
		<view class="copyRight">
			<view class="text">Copyright ©</view>
			<view class="text">上海同九健康科技有限公司</view>
			<view class="text">版权所有</view>
		</view>
	</view>
	</u-loading>
	
</template>

<script>
import { getPhoneNumber, getSession, login } from "@/api/login"
import { setLoginInfo, setWXLoginInfo } from '@/utils/auth'

export default {
	data() {
		return {
			checkboxValueList: [],
			isAgree: false,
			userInfo: {
				encryptedData: '',
				iv: '',
			},
			sessionData: {},
		};
	},
	mounted() {
		this.getSession()
	},
	methods: {
		async getSession() {
			const that = this;
			await uni.login({
				provider: 'weixin',
				async success(data) {
					let sessionData = await getSession({
						appId: 'wxce8b7cd8875726d1',
						appType: 'mini',
						jsCode: data.code
					})
					that.sessionData = sessionData.data;
					console.log('微信session:',that.sessionData);
				}
			})
		},
		agreeChange(e) {
			if (e.length) {
				this.isAgree = true;
				// 获取用户信息
				this.getWeiXinUserInfo();
			} else {
				this.isAgree = false;
			}
			console.log(this.isAgree);
		},
		toPrivacyPolicyPage(page) {
			uni.navigateTo({
				url: `/pages/login/PrivacyPolicyPage/PrivacyPolicyPage?page=${page}`
			});
		},
		fakeLogin() {
			if (!this.isAgree) {
				uni.$u.toast('请先同意用户协议');
				return;
			}
		},
		getWeiXinUserInfo() {
			uni.getUserInfo({
				provider: 'weixin',
				success: (res) => {
					this.userInfo = {
						encryptedData: res.encryptedData,
						iv: res.iv,
					};
					console.log('微信用户信息:',this.userInfo);
				}
			});
		},
		login(e) {
			console.log('微信授权获取手机code码:',e);
			let phoneCode = e.detail.code
			if (!phoneCode) {
				uni.showToast({
				icon: 'error',
				title: '微信授权失败'
				})
				return false;
			}

			this.getPhoneNumber(phoneCode)
		},
		async getPhoneNumber(code) {
			let res = await getPhoneNumber({
				appId: 'wxce8b7cd8875726d1',
				code,
			})

			if (res.code == '1') {
				this.toRealLogin(res.data)
			}
		},
		async toRealLogin(phoneNumber) {
			let loginInfo = await login({ 
				phoneNumber: this.sessionData.isAuthPhoneNumber ? phoneNumber : '',
				openId: this.sessionData.openId,
				sessionKey: this.sessionData.sessionKey,
				appIdType: 'mini'
			})
			if (loginInfo.code == '1') {
				this.$store.commit('user/setUserInfo', loginInfo.data)
				// 本地存储一下loginInfo
				setLoginInfo(loginInfo.data)
				uni.switchTab({
					url: '/pages/home/home'
				});
			}
		},
		async getUserAvatarAndNickName(openId) {
			let loginInfo = await getUserAvatarAndNickName({
				openId,
				...this.userInfo
			})
			if (loginInfo.code == '1') {
				let WXuserInfo = {
					avatarUrl: loginInfo.data.avatar,
					nickName: loginInfo.data.nickName,
				}
				// 更新用户微信资料
				this.$store.commit('user/setWXuserInfo',WXuserInfo);
				// 持久化存储
				setWXLoginInfo(WXuserInfo);
				uni.switchTab({
					url: '/pages/userCenter/userCenter'
				});
			}
		},
		async mockLogin() {
			let loginInfo = await mockLogin({ openId: '1' })
			if (loginInfo.code == '1') {
				this.$store.commit('user/setUserInfo', loginInfo.data)
				// 本地存储一下loginInfo
				setLoginInfo(loginInfo.data)
				uni.switchTab({
					url: '/pages/userCenter/userCenter'
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.login_container {
	position: relative;
	height: 100vh;
	background-image: url("~@/static/login/login_bg.jpg");
	background-size: 100% 100%;

	.loginBox {
		height: calc(100vh - 120rpx);

		.halfBox {
			height: 50%;

			&:first-child {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.pmsLogo {
					width: 300rpx;
					height: 234rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.slogan {
					position: relative;
					top: 50rpx;
					color: #016ab7;
					font-size: 32rpx;
					font-weight: 700;
				}
			}

			&:last-child {
				position: relative;

				.phoneLogin {
					width: 65%;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 26rpx;
					border-radius: 50rpx;
					background-color: #016ab7;
					margin-bottom: 26rpx;
				}

				.fakeLogin {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					left: 50%;
					top: 0;
					transform: translate(-50%);
					width: 65%;
					color: #fff;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 26rpx;
					border-radius: 50rpx;
					background-color: #016ab7;
				}

				.agreeBox {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;
					font-size: 26rpx;
					margin-bottom: 150rpx;

					::v-deep.u-checkbox-group {
						.u-checkbox {
							.u-checkbox__icon-wrap {
								border: 2rpx solid #000 !important;
							}
						}
					}

					.disclaimer,.personalInfo {
						color: #3c6df5;
						font-weight: 600;
					}
				}

				.freeUse {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					color: #016ab7;
					font-weight: 700;
					text-align: center;

					.open {
						margin-right: 30rpx;
					}
				}
			}
		}
	}
	
	.copyRight {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;

		.text {
			font-weight: 600;
			font-size: 22rpx;
		}
	}
}
</style>
